import { Button, Card, Form, Input, message, Popconfirm, Space } from "antd";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import React, { Key, useEffect, useState } from "react";
import Table, { ColumnsType } from "antd/lib/table";
import {
  reqBatchRemoveHospitalSet,
  reqGetHospitalSet,
  reqRemoveHospitalSet,
} from "@/api/hospital/hospitalSet";
import {
  HospitalItem,
  HospitalItems,
} from "@/api/hospital/model/hospitalSetTypes";
import { useNavigate } from "react-router-dom";

export default function HospitalSet() {
  //声明表格的结构
  const columns: ColumnsType<any> = [
    {
      title: "序号",
      width: 80,
      render: (value, row, index) => {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机号",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      fixed: "right",
      render: (value, row, index) => {
        return (
          <Space>
            <Button
              type="primary"
              onClick={() => {
                navigate(`/syt/hospital/hospitalSet/edit/${row.id}`);
              }}
              icon={<EditOutlined />}
            ></Button>
            <Popconfirm title="您确定要删除该信息么?" onConfirm={remove(row.id)}>
              <Button
                type="primary"
                danger
                icon={<DeleteOutlined />}
              ></Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  let remove = (id: string) => {
    return async () => {
      await reqRemoveHospitalSet(id);
      //提醒
      message.success("删除成功");
      //调用
      getHospitalSet();
    };
  };

  //声明与分页相关数据的状态
  let [current, setCurrent] = useState(1);
  let [total, setTotal] = useState(0);
  let [pageSize, setPageSize] = useState(5);
  //声明状态管理医院设置信息
  let [hospitalSet, setHospitalSet] = useState<HospitalItems>([]);

  //声明一个函数, 获取医院设置信息
  let getHospitalSet = async () => {
    //获得表单数据
    let data = form.getFieldsValue();
    //发送请求, 获取医院设置信息
    let { total, records } = await reqGetHospitalSet({
      page: current,
      limit: pageSize,
      ...data,
    });
    //更新总数状态
    setTotal(total);
    //更新医院设置的信息状态
    setHospitalSet(records);
  };

  //发送请求, 获取医院设置的信息
  useEffect(() => {
    //调用函数, 获取医院设置信息
    getHospitalSet();
  }, [current, pageSize]);

  //获得 form 对象
  const [form] = Form.useForm();

  //声明变量
  let finish = () => {
    //判断
    if (current !== 1) {
      setCurrent(1);
    } else {
      getHospitalSet();
    }
  };

  //重置事件函数
  const reset = () => {
    //重新发送请求
    getHospitalSet();
  };

  //获得 navigate 函数
  const navigate = useNavigate();

  //跳转新增的回调
  const jumpAdd = () => {
    navigate("/syt/hospital/hospitalSet/add");
  };

  //声明状态管理 选中的 id 信息
  const [selectedKey, setSelectedKey] = useState<Key[]>([]);

  //声明函数批量删除
  const batchRemove = async () => {
    await reqBatchRemoveHospitalSet(selectedKey);
    //
    message.success('批量删除成功');
    //重新获取数据
    getHospitalSet();
  }

  return (
    <Card>
      {/* 表单部分 start */}
      {/* 2. 设置 form 属性 */}
      <Form
        name="basic"
        layout="inline"
        onFinish={finish}
        form={form}
        onReset={reset}
      >
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          <Space size="middle">
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>

            <Button htmlType="reset">清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className="h-20"></div>
      {/* 表单部分 end */}

      {/* 按钮部分 start */}
      <Space>
        <Button type="primary" onClick={jumpAdd}>
          添加
        </Button>
        <Button onClick={batchRemove} disabled={selectedKey.length === 0 ? true : false}>批量删除</Button>
      </Space>
      <div className="h-20"></div>
      {/* 按钮部分 end */}

      {/* 表格部分 start */}
      <Table
        columns={columns}
        dataSource={hospitalSet}
        bordered
        scroll={{ x: 1300 }}
        rowKey="id"
        pagination={{
          // 数据总数
          total: total,
          // 每页显示的数据条数
          pageSize: pageSize,
          // 页码数
          current: current,
          //显示快速跳转页码的组件
          showQuickJumper: true,
          //显示改变每页显示数量的组件
          showSizeChanger: true,
          //设置每页显示数量的信息
          pageSizeOptions: [2, 5, 10, 20],
          //显示数据的总述
          showTotal: (total: number) => {
            return `总数为 ${total} 条`;
          },
          //当对分页的页码进行修改的时候, 触发该事件
          onChange: (page: number, pageSize: number) => {
            //修改状态
            setCurrent(page);
            setPageSize(pageSize);
            //发送请求
          },
        }}
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedRowKeys: React.Key[]) => {
            //更新状态
            setSelectedKey(selectedRowKeys)
          }
        }}
      />
      {/* 表格部分 end */}
    </Card>
  );
}
